<template>
  <div class="discover-view">
    <h1>发现好电影</h1>
    <div class="movies-container">
      <movie-card 
        v-for="movie in movies" 
        :key="movie.id" 
        :movie="movie"
        @click="viewMovieDetails(movie.id)"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'; // 导入 ref
import { useRouter } from 'vue-router'; // 导入 useRouter
import MovieCard from '@/components/MovieCard.vue';

const router = useRouter(); // 获取 router 实例

const movies = ref([ // 使用 ref 定义响应式数据
  {
    id: '1',
    title: '流浪地球2',
    poster: 'https://codelover.club/coursefiles/images/film/创意.jpeg',
    rating: 8.3,
    genre: '科幻',
    year: '2023'
  },
  {
    id: '2',
    title: '满江红',
    poster: 'https://codelover.club/coursefiles/images/film/剧情.jpeg',
    rating: 7.2,
    genre: '悬疑',
    year: '2023'
  },
  {
    id: '3',
    title: '独行月球',
    poster: 'https://codelover.club/coursefiles/images/film/动画.jpeg',
    rating: 6.9,
    genre: '喜剧',
    year: '2022'
  },
  {
    id: '4',
    title: '长津湖',
    poster: 'https://codelover.club/coursefiles/images/film/励志.jpeg',
    rating: 7.3,
    genre: '战争',
    year: '2021'
  },
  {
    id: '5',
    title: '你好，李焕英',
    poster: 'https://codelover.club/coursefiles/images/film/搞笑.jpeg',
    rating: 7.8,
    genre: '喜剧',
    year: '2021'
  },
  {
    id: '6',
    title: '战狼2',
    poster: 'https://codelover.club/coursefiles/images/film/运动.jpeg',
    rating: 7.1,
    genre: '动作',
    year: '2017'
  },
  {
    id: '7',
    title: '哪吒之魔童降世',
    poster: 'https://codelover.club/coursefiles/images/film/旅行.jpeg',
    rating: 8.4,
    genre: '动画',
    year: '2019'
  },
  {
    id: '8',
    title: '我不是药神',
    poster: 'https://codelover.club/coursefiles/images/film/爱情.jpeg',
    rating: 9.0,
    genre: '剧情',
    year: '2018'
  },
  {
    id: '9',
    title: '流浪地球',
    poster: 'https://codelover.club/coursefiles/images/film/广告.jpeg',
    rating: 7.9,
    genre: '科幻',
    year: '2019'
  },
  {
    id: '10',
    title: '唐人街探案3',
    poster: 'https://codelover.club/coursefiles/images/film/纪录.jpeg',
    rating: 6.5,
    genre: '喜剧',
    year: '2021'
  },
  {
    id: '11',
    title: '金刚川',
    poster: 'https://codelover.club/coursefiles/images/film/科幻.jpeg',
    rating: 7.6,
    genre: '战争',
    year: '2020'
  },
  {
    id: '12',
    title: '姜子牙',
    poster: 'https://codelover.club/coursefiles/images/film/游戏.jpeg',
    rating: 6.7,
    genre: '动画',
    year: '2020'
  }
]);

const viewMovieDetails = (id) => { // 直接定义函数
  // 使用 router.push 跳转到播放页，并传递电影ID作为参数
  router.push(`/movie/${id}`);
};
</script>

<style scoped>
.discover-view {
  padding: 20px;
  margin-top: 56px; /* 避免被导航栏遮挡 */
  background-color: #f5f5f5;
  min-height: calc(100vh - 76px);
}

.movies-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: -15px; /* 抵消卡片的margin */
}

h1 {
  margin-bottom: 20px;
  color: #333;
  text-align: center;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .discover-view {
    padding: 15px 10px;
  }
  
  .movies-container {
    justify-content: center;
  }
}
</style>